<template>
  <div class="description">
    <div class="section">
      <Row :gutter="20">
        <Col :span="12">
          <div class="segment segment-1">
            <h4 class="segment-title">实时发电量（千瓦）</h4>
            <span class="segment-label">{{ description.rtGenElec | noDataFormat}}</span>
          </div>
        </Col>
        <Col :span="12">
          <div class="segment segment-2">
            <h4 class="segment-title">风机数量（个）</h4>
            <span class="segment-label">{{ description.windFacNum | noDataFormat}}</span>
          </div>
        </Col>
      </Row>
    </div>
    <div class="section">
      <Row :gutter="20">
        <Col :span="12">
          <div class="segment segment-3">
            <h4 class="segment-title">装机总容量（千瓦）</h4>
            <span class="segment-label">{{ description.capacity| noDataFormat }}</span>
          </div>
        </Col>
        <Col :span="12">
          <div class="segment segment-4">
            <h4 class="segment-title">日发电量（千瓦）</h4>
            <span class="segment-label">{{ description.genElecDay| noDataFormat }}</span>
          </div>
        </Col>
      </Row>
    </div>
    <div class="section">
      <Row :gutter="20">
        <Col :span="12">
          <div class="segment segment-5">
            <h4 class="segment-title">同时率（%）</h4>
            <span class="segment-label">{{ description.diversity | noDataFormat}}</span>
          </div>
        </Col>
        <Col :span="12">
          <div class="segment segment-6">
            <h4 class="segment-title">可调裕度（千瓦）</h4>
            <span class="segment-label">{{ description.ktyd  | noDataFormat}}</span>
          </div>
        </Col>
      </Row>
    </div>
    <div class="section">
      <Row :gutter="20">
        <Col :span="12">
          <div class="segment segment-7">
            <h4 class="segment-title">理论功率（千瓦）</h4>
            <span class="segment-label">{{ description.thePower | noDataFormat}}</span>
          </div>
        </Col>
        <Col :span="12">
          <div class="segment segment-8">
            <h4 class="segment-title">节能减排（千克）</h4>
            <span class="segment-label">{{ description.co2 | noDataFormat}}</span>
          </div>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { windSystemOverview } from '@/api/scada'

export default {
    name: "description",
    props: {},
    data() {
        return {description: {}};
    },
    computed: {},
    created() {
    },
    mounted() {
        windSystemOverview().then(res => {
            console.log(res)
            this.description = res.result || {}
        })
    },
    watch: {},
    methods: {},
    components: {}
};
</script>

<style scoped lang="scss">
  .section + .section {
    margin-top: 28px;
  }

  .segment {
    padding-left: 80px;
    position: relative;
  }

  .segment::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 60px;
    height: 60px;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .segment::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 60px;
    height: 60px;
    background-position: center;
    background-size: auto;
    background-repeat: no-repeat;
  }

  .segment.segment-1::before {
    background-image: url("../../../../assets/img/windPower/11.png");
  }

  .segment.segment-1::after {
    background-image: url("../../../../assets/img/windPower/14.png");
  }

  .segment.segment-2::before {
    background-image: url("../../../../assets/img/windPower/10.png");
  }

  .segment.segment-2::after {
    background-image: url("../../../../assets/img/windPower/16.png");
  }

  .segment.segment-3::before {
    background-image: url("../../../../assets/img/windPower/8.png");
  }

  .segment.segment-3::after {
    background-image: url("../../../../assets/img/windPower/2.png");
  }

  .segment.segment-4::before {
    background-image: url("../../../../assets/img/windPower/4.png");
  }

  .segment.segment-4::after {
    background-image: url("../../../../assets/img/windPower/15.png");
  }

  .segment.segment-5::before {
    background-image: url("../../../../assets/img/windPower/7.png");
  }

  .segment.segment-5::after {
    background-image: url("../../../../assets/img/windPower/12.png");
  }

  .segment.segment-6::before {
    background-image: url("../../../../assets/img/windPower/6.png");
  }

  .segment.segment-6::after {
    background-image: url("../../../../assets/img/windPower/33.png");
  }

  .segment.segment-7::before {
    background-image: url("../../../../assets/img/windPower/9.png");
  }

  .segment.segment-7::after {
    background-image: url("../../../../assets/img/windPower/1.png");
  }

  .segment.segment-8::before {
    background-image: url("../../../../assets/img/windPower/5.png");
  }

  .segment.segment-8::after {
    background-image: url("../../../../assets/img/windPower/13.png");
  }

  .segment-title {
    font-size: 14px;
    color: #333;
    font-weight: 400;
    line-height: 24px;
  }

  .segment-label {
    font-size: 24px;
    color: #333;
  }
</style>
